<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link href="../css/login.css" rel="stylesheet" type="text/css"/>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--    用到axios千万不要把这个忘啦-->
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
    <script>
        function onchangeFun() {
            //正则判断
            var userName = document.getElementById("in1").value;
            var patt = /^\w{5,12}$/;// 必须是字母，数字，下划线组成，并且长度再5到12位之间
            var flag = patt.test(userName);
            if (flag || userName === "") {
                document.getElementById("wrong").innerHTML = "";
            } else {
                document.getElementById("wrong").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp用户名不合法";
            }
        }

        function ok() {
            var theID = document.getElementById("in1").value;
            var thePs = document.getElementById("in2").value;
            axios({
                method: "post",
                url: "http://localhost:20202/STA_BLOG_CSDN_war_exploded/loginServlet",
                data: Qs.stringify({
                    id: theID,
                    ps: thePs
                }),
            }).then(function (resp) {
                console.log(resp.data);
                console.log("2143324");
                if (resp.data === "登录成功") {
                    window.location.href = 'home.html';
                } else if (resp.data === "登录失败") {
                    document.getElementById("wrong").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp账号或密码错误";
                }
            });
        }
    </script>

</head>
<body class="backGround">
<h1 class="bigTitle">知识传播 · 在线学习 · 职业发展</h1>
<div class="board">
    <br/><br/>
    <h1 class="title">登 录</h1><br/>
    <input onchange="onchangeFun();" class="in" type="text" id="in1" name="id" placeholder="请输入账号/绑定手机号">
    <span id="wrong" style="color: #f76565"></span>
    <input class="in" type="password" id="in2" name="ps" placeholder="请输入密码">
    <div style="display: flex; justify-content: right">
        <a href="reset.html" style="color: #5140cf">忘记密码？&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>
    <input type="button" onclick="ok();" class="login" value="点 击 登 录">
    <br/>
    <div class="other">
        还没有注册账号？
        <a href="enroll.html">点击注册</a>
    </div>
</div>
<img class="leftTop" src="../img/flirty.png">
<img class="rightBottom" src="../img/baby.png">
<img class="rightTop" src="../img/dead-2.png">
<img class="leftBottom" src="../img/flirt.png">

</body>
</html>